<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 800px;height:600px;" ></div>

    <script src="./lib/echarts.min.js"></script>

    <script>
        //数据
        const foodArr = [
            {name:"苹果",value:1330},
            {name:"香蕉",value:104344},
            {name:"火龙果",value:4310},
            {name:"荔枝",value:1350},
            {name:"榴莲",value:102343},
            {name:"山竹",value:1560},
            {name:"芭乐",value:1340},
        ]

        const myChart = echarts.init(document.querySelector("#main"))

        //绘图参数 配置项
        const option = {
            title:{
                text:"水果的售价",
            },
            //图例组件
            legend:{
                right:'5%',
                data:['价格']
            },
            //绘制网格
            grid:{
                left:'20%',
            },
            xAxis:{
                //类目数据
                data:foodArr.map(v => v.name)
                //data:[xxxx,xxxxx，xxxxX，ZZZZ]
            },
            yAxis:{
                //y轴分割线
                splitLine:{
                    lineStyle:{
                        type:"dotted"
                    }
                }
            },
            //提示框组件
            tooltip:{
                //触发方式 默认图形
                trigger:'axis'
            },
            //系列列表
            series:[
                {
                    name:'价格',
                    type:'bar',
                    data:foodArr.map(v => v.value)
                }
            ],
            //#_ _ _ _ _ _  0-9 a-f
            // R R G G B B
            //#f f 0 0 0 0
            color:['#86cce9']
        }

        myChart.setOption(option)
    </script>
</body>
</html>